<template>
  <div>
    <div style="text-align: right;">
      <el-button type="primary" @click="addRegion()">新建</el-button>
    </div>
<!--    修改对话框-->
    <el-dialog
      v-model="dialogVisible1"
      title="修改区域"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm1"
        :rules="rules1"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="地区选择：" prop="name">
          <el-select
            v-model="ruleForm1.name"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区域负责人：" prop="managerName">
          <el-input v-model="ruleForm1.managerName" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="managerPhone">
          <el-input v-model="ruleForm1.managerPhone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toUp()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



<!--    新增对话框-->
    <el-dialog
      v-model="dialogVisible"
      title="新建区域"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="地区选择：" prop="name">
          <el-select
            v-model="ruleForm.name"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="区域负责人：" prop="managerName">
          <el-input v-model="ruleForm.managerName" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="managerPhone">
          <el-input v-model="ruleForm.managerPhone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAdd()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="rid" label="区域id" width="180" />
    <el-table-column prop="cityCode" label="区域编号" width="180" />
    <el-table-column prop="name" label="区域名称" width="180" />
    <el-table-column prop="managerName" label="区域负责人" width="180" />
    <el-table-column prop="managerPhone" label="手机号码" width="180" />
    <el-table-column prop="activeStatus" label="状态" width="150" #default="scope">
      <el-button link v-if="scope.row.activeStatus==2">启用</el-button>
      <el-button link v-if="scope.row.activeStatus==1">禁用</el-button>
      <el-button link v-if="scope.row.activeStatus==0">草稿</el-button>
    </el-table-column>
    <el-table-column prop="updateTime" label="更新时间" width="180" />
    <el-table-column label="操作" width="500" #default="scope">
      <el-button text="primary" type="primary" @click="del(scope.row)">删除</el-button>
      <el-button text="primary" type="primary" @click="xg(scope.row)">编辑</el-button>
      <el-button text="primary" type="primary">调度配置</el-button>
      <el-button text="primary" type="primary" >
        <router-link :to="{path:'/regionalServices/index',query:{regionId:scope.row.rid} }">设置服务</router-link>
      </el-button>
      <el-button text="danger" type="danger" @click="qd(scope.row)">启用</el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="regionList.pageNum"
    v-model:page-size="regionList.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </div>
</template>

<script setup>
import {ref,reactive} from "vue";
import {showRegion,showCity,addregion,delregion,qidregion,xgregion} from '@/api/region/region'
import {ElMessage} from "element-plus";


// 校验
const ruleForm = reactive({

})
const rules = reactive({
  name: [
    { required: true, message: '请选择区域地区', trigger: 'blur' },
    { min:1, message: '必须选择区域地区', trigger: 'blur' },
  ],
  managerName: [
    { required: true, message: '请输入区域负责人', trigger: 'blur' },
    { min: 1,  message: '长度最少为1位', trigger: 'blur' },
  ],
  managerPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号码必须为11位', trigger: 'blur' },
  ],

})



const total=ref(0)
const regionList=ref({
  pageNum:1,
  pageSize:5
})
const handleSizeChange = (val) => {
  regionList.value.pageSize=val
  show()
}
const handleCurrentChange = (val) => {
  regionList.value.pageNume=val
  show()
}

const tableData = ref([])

function show(){
    showRegion(regionList.value).then(res=>{
      console.log(res.data)
     tableData.value=res.data.data.records
      total.value=res.data.data.total
  })
}
show()


// 区域城市列表
const  options=ref([])
function citys(){
  showCity().then(res=>{
    options.value=res.data.data
  })
}
citys()

// 新增
const dialogVisible = ref(false)
function addRegion(){
  dialogVisible.value=true
}
function toAdd(){
  addregion(ruleForm).then(res=>{
    console.log(res)
    if (res.data.code==200){
      ElMessage.success(res.data.data)
      dialogVisible.value=false
      show()
      ruleForm=ref({})
    }else{
      ElMessage.error(res.data.data)
    }
  })
}


// 删除
function del(row){
  delregion(row).then(res=>{
    console.log(res)
    if (res.data.code==200){
      ElMessage.success(res.data.data)
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}

// 启动
function qd(row){
  qidregion(row).then(res=>{
    console.log(res)
    if (res.data.code==200){
      ElMessage.success(res.data.data)
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}

// 修改
const dialogVisible1=ref(false)
const ruleForm1=ref({})
const rules1 = reactive({
  name: [
    { required: true, message: '请选择区域地区', trigger: 'blur' },
    { min:1, message: '必须选择区域地区', trigger: 'blur' },
  ],
  managerName: [
    { required: true, message: '请输入区域负责人', trigger: 'blur' },
    { min: 1,  message: '长度最少为1位', trigger: 'blur' },
  ],
  managerPhone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号码必须为11位', trigger: 'blur' },
  ],

})
function xg(row){
  dialogVisible1.value=true
  ruleForm1.value=row
}
function toUp(){
  xgregion(ruleForm1.value).then(res=>{
    console.log(res)
    if (res.data.code==200){
      ElMessage.success(res.data.data)
      dialogVisible1.value=false
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}
</script>
